<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));
  // 指定图表的配置项和数据
  var option = {}
  var xData = ["1月", "2月", "3月", "4月", "5月", "6月"],
    yData1 = [104, 56, 136, 86, 98, 86],
    yData2 = [100, 206, 236, 106, 80, 160],
    yData3 = [90, 106, 236, 96, 180, 100],
    yData4 = [90, 56, 36, -6, -50, -70],
    borderData = [5, 5, 5, 5, 5, 5], //顶上的小矩形
    legend = ["本企业", "电力用户", "其他企业", "同比"],
    colorArr = [{
        start: "rgba(155, 101, 229,",
        end: "rgba(18, 58, 86,0.5)"
      },
      {
        start: "rgba(71, 173, 245,",
        end: "rgba(18, 58, 86,0.5)"
      },
      {
        start: "rgba(82, 249, 107,",
        end: "rgba(18, 58, 86,0.5)"
      },
      {
        color: "#00EAFF"
      }
    ];
  var normalColor = "rgba(255,255,255,0.5)";
  var series = [];
  [yData1, yData2, yData3].forEach((item, index) => {
    let obj1 = {};
    obj1 = {
      name: legend[index],
      type: 'bar',
      data: item,
      barWidth: '10%',
      stack: legend[index],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: colorArr[index].start + '0.5)'
            },
            {
              offset: 1,
              color: colorArr[index].end
            }
          ]
        }
      }
    }
    series.push(obj1)
    let obj2 = {
      name: '',
      type: 'bar',
      stack: legend[index],
      itemStyle: {
        color: colorArr[index].start + '1)'
      },
      data: borderData
    }
    series.push(obj2)
  })
  console.log(series)
  series.push({
    name: legend[3],
    type: 'line',
    data: yData4,
    yAxisIndex: 1
  })
  option = {
    backgroundColor: '#333',
    // grid:{}
    tooltip: {},
    legend: {
      show: true,
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 5,
      left: 'center',
      data: legend,
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: [{
        type: 'value',
        name: "Y1",
        axisLabel: {
          formatter: '{value} w'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: "Y2",
        axisLabel: {
          formatter: '{value} w'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        min: -100,
        max: 100,
        axisLabel: {
          formatter: '{value} %'
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: series
  }

  charts.setOption(option);
</script>